<template>
  <div class="forgot-inner">
    <div class="flex">
      <div class="forgot-inner-title">忘记密码</div>
      <span class="forget-password" @click="goLogin">返回登录</span>
    </div>
    <a-form layout="horizontal" :model="state.formInline" @submit.prevent="handleSubmit">
      <a-form-item>
        <a-input v-model:value="state.formInline.username" size="large" placeholder="请输入手机号">
        </a-input>
      </a-form-item>
      <a-form-item>
        <div class="btn-form">
          <a-input
            v-model:value="state.formInline.verifyCode"
            size="large"
            placeholder="请输入验证码"
          >
          </a-input>
          <a-button
            style="margin-left: 20px"
            type="primary"
            size="large"
            :loading="state.loading"
            block
          >
            获取短信验证码
          </a-button>
        </div>
      </a-form-item>
      <a-form-item>
        <a-input
          v-model:value="state.formInline.password"
          size="large"
          type="password"
          placeholder="请输入新密码"
          autocomplete="new-password"
        >
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" size="large" :loading="state.loading" block>
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
  import { reactive, defineEmits } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { message, Modal } from 'ant-design-vue';
  import { useUserStore } from '@/store/modules/user';
  import { getImageCaptcha } from '@/api/login';
  import { to } from '@/utils/awaitTo';

  const emit = defineEmits(['goLogin']);
  const state = reactive({
    loading: false,
    captcha: '',
    formInline: {
      username: '',
      password: '',
      verifyCode: '',
      captchaId: '',
    },
  });

  const route = useRoute();
  const router = useRouter();

  const userStore = useUserStore();

  const setCaptcha = async () => {
    const { id, img } = await getImageCaptcha({ width: 100, height: 50 });
    state.captcha = img;
    state.formInline.captchaId = id;
  };
  setCaptcha();
  // 忘记密码
  const goLogin = () => {
    emit('goLogin', false);
  };
  const handleSubmit = async () => {
    const { username, password, verifyCode } = state.formInline;
    if (username.trim() == '' || password.trim() == '') {
      return message.warning('用户名或密码不能为空！');
    }
    if (!verifyCode) {
      return message.warning('请输入验证码！');
    }
    message.loading('登录中...', 0);
    state.loading = true;
    console.log(state.formInline);
    // params.password = md5(password)

    const [err] = await to(userStore.login(state.formInline));
    if (err) {
      Modal.error({
        title: () => '提示',
        content: () => err.message,
      });
      setCaptcha();
    } else {
      message.success('登录成功！');
      setTimeout(() => router.replace((route.query.redirect as string) ?? '/'));
    }
    state.loading = false;
    message.destroy();
  };
</script>

<style lang="less" scoped>
  .forgot-inner {
    position: absolute;
    right: 10%;
    top: 18%;
    width: 32.81vw;
    background-color: rgba(15, 30, 54, 0.8);
    padding: 3.125vw;
    border-radius: 10px;
    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 3.125vw;
    }
    .forgot-inner-title {
      font-size: 1.458vw;
      color: white;
    }
  }
  .forget-password {
    text-align: right;
    color: #5499f7;
    cursor: pointer;
  }
  .btn-form {
    display: flex;
    align-items: center;
  }
  :deep(.ant-form) {
    width: 100%;

    .ant-col {
      width: 100%;
    }

    .ant-form-item-label {
      padding-right: 6px;
    }
    .ant-input {
      height: 3vw;
      line-height: 3vw;
      background-color: rgba(15, 30, 54, 0);
      color: white;
    }
    .ant-btn {
      height: 3.64vw;
      background-color: #2674df;
    }
    .ant-input-affix-wrapper {
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      background-color: rgba(15, 30, 54, 0);
      border-radius: 4px;
    }
    .ant-form-item-control-input-content .ant-input.ant-input-lg {
      height: 3.64vw;
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      border-radius: 4px;
      line-height: 3.64vw;
    }
    svg {
      width: 20px;
    }
  }
</style>
